@import url('~@/styles/animations.less');
@import url('~@/styles/mixin.less');

.page {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #060e2b 0%, #040d27 48%, #0b235b 100%);
    background: url('~@/assets/report/teacher/fourth/bg.png') no-repeat center;
    background-size: cover;

    p {
        color: #fff;
        font-size: 16px;
        line-height: 22px;
    }
    &_top {
        position: absolute;
        top: 32px;
        left: 24px;
    }

    &_content {
        position: absolute;
        top: 13%;
        display: flex;
        flex-direction: column;
        gap: 13px;
        width: 100%;
        padding: 0 24px;

        p {
            color: #fff;
            font-size: 16px;
            line-height: 22px;
        }

        .title {
            color: #fff;
            font-weight: bold;
            font-size: 20px;
            line-height: 28px;
        }

        &_leftBox {
            display: flex;
            width: 100%;
        }

        &_rightBox {
            display: flex;
            justify-content: flex-end;
            width: 100%;
        }

        &_leftCard {
            .slide-in-left();

            .title {
                .line(1);
            }

            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 280px;
            height: 92px;
            padding: 26px 16px 12px 16px;
            text-align: left;
            background: url('~@/assets/report/teacher/fourth/bg_card_left.png') no-repeat center;
            background-size: cover;
        }
        &_rightCard {
            .slide-in-right();

            .title {
                .line(1);
            }

            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 280px;
            height: 92px;
            padding: 26px 16px 12px 16px;
            text-align: right;
            background: url('~@/assets/report/teacher/fourth/bg_card_right.png') no-repeat center;
            background-size: cover;
        }
    }

    .footOneImage {
        position: absolute;
        right: 74px;
        bottom: 0;
        width: 102px;
        height: 85px;
        background: url('~@/assets/report/teacher/fourth/foot1.png') no-repeat center;
        background-size: cover;

        .slide-in-blurred-top();
    }
    .footTwoImage {
        position: absolute;
        bottom: 8%;
        left: 78px;
        width: 75px;
        height: 98px;
        background: url('~@/assets/report/teacher/fourth/foot2.png') no-repeat center;
        background-size: cover;

        .slide-in-blurred-top(0.8s);
    }
    .louImage {
        position: absolute;
        right: 0;
        bottom: 12%;
        width: 232px;
        height: 466px;
        background: url('~@/assets/report/teacher/fourth/png_lou.png') no-repeat center;
        background-size: cover;
    }
}
